<template>
    <div class="home">
        <header class="tc ">
            <h1 class="title pr pr20 pl20 f35 cfff fn">
               <router-link class="img pa cfff" to="/payOrder">
                    <i class="el-icon-arrow-left  f40 "></i>
                </router-link>
                订单详情
            </h1>
        </header>
        <nav class="p20 cfff f20">
          <p class="f25 pl30 mb40">支付成功，请您前往指定门店消费</p>
          <div class="flex jcsb pl30 pr30 mb45">
            <div>
              <p class="mb25">
                <img class="store mr10" src="../../../assets/img/wash-car-img/store-white.png">
                <span class="f30">{{storeInfo.name}}</span>
              </p>
              <p class="ml50">{{storeInfo.location}}</p>
            </div>
            <router-link to="storeDetailsNavigation">
              <img src="../../../assets/img/wash-car-img/plane-white.png">
            </router-link>
          </div>
        </nav>
        <main class="p20">
            <section class="main-order bcfff mb20 f25">
                <ul class="info ">
                  <h2 class="mb15 f30 fn">订单详情</h2>
                  <div class="line mb40" style="height:7rem"></div>
                  <li class="flex jcsb" v-for="el in serviceList">
                      <span>{{el.serviceItem}}</span>
                      <p class=" asc f30">￥{{el.currentPrice}}</p>
                  </li>
                  <li class="flex jcsb">
                      <span>车辆附加费用</span>
                      <p class=" asc">{{obj.addPrice}}</p>
                  </li>
                  <li class="line" style="height:2rem"></li>
                  <li class="flex jcsb">
                      <span>原价</span>
                      <p class=" asc f30">￥{{originMoney}}</p>
                  </li>
                  <li class="flex jcsb">
                      <span>店家优惠</span>
                      <p class=" asc cff40">-￥{{discount}}</p>
                  </li>
                  <li class="line " style="height:4rem"></li>
                  <li class="flex jcsb">
                      <span>优惠劵</span>
                      <p class=" asc cff40 ">-￥{{obj.card}}</p>
                  </li>
                  <li class="line " style="height:7rem"></li>
                  <li class="flex jcsb mb5 f30">
                      <span>支付金额</span>
                      <p class=" asc c21ca">-￥{{money}}</p>
                  </li>
                  </ul>
            </section>
            <section class="bcfff mb20 f25">
                <ul class="info ">
                  <h2 class="mb15 f30">订单信息</h2>
                  <div class="line mb40" style="height:7rem"></div>
                  <li class="flex jcsb">
                      <span>订单号:</span>
                      <p class=" asc f25 c808">{{obj.orderNum}}</p>
                  </li>
                  <li class="flex jcsb">
                      <span>下单时间:</span>
                      <p class=" asc f25 c808">{{obj.time}}</p>
                  </li>
                  <li class="flex jcsb">
                      <span>车辆:</span>
                      <p class=" asc c808">{{obj.carName}}</p>
                  </li>
                </ul>
            </section>
        </main>
    </div>
</template>
<script>
export default {
    mounted(){
        this.storeInfo = this.$route.params.storeInfo;
        this.serviceList = this.$route.params.serviceList;
        this.money = this.$route.params.money;
        // console.log(this.serviceList);
        for(let i=0;i<this.serviceList.length;i++){
        this.originMoney+=this.serviceList[i].originPrice;
       }
       this.discount = this.originMoney - this.money;
        // console.log(this.storeInfo);
    },
    data(){
        return{
            serviceList:[],
            storeInfo:{},
            money:0,
            originMoney:0,
            discount:0,
            obj:{
                storeName: "伟业汽车美容店(人民路店)",
                address: "山阳区人民中路33号",
                realPrice: 39.90, 
                addPrice: 0,
                falsePrice: 59.90,
                storeCard: 20,
                card: 10,
                money: 29.9,
                orderNum:"121212112487878",
                time: `2020.01.08  17:40`,  
                carName: "奔驰FWE4/豫A98FHJ"     
            }
        }
    }
}
</script>
<style scoped>
.c21ca{color: #21ca59;}
.cff40{color: #ff4000;}
.c297e{color: #297efa;}
.c808{color: #808080;}
.mb35{margin-bottom: 35rem;}
.asc{align-self:center;}
.line{height: 1rem;background-color: #f7f7f7;}
.home{background-color: #f7f7f7;}
/* 头部样式  ---需要可剪切 */
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  .img{width: auto;left: 20rem;top: 0;}

nav {margin-top: -310rem;}
nav img{width: 35rem;height: auto;vertical-align: middle;}

/* 手机端必须加上这一句--体验感 */
main{margin-bottom: 20rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
section ul.info li{margin-bottom: 38rem;}
</style>